<template>
  <div class="banner-container">
    <van-swipe :autoplay="5000">
      <van-swipe-item v-for="image in images" :key="image.id" @click="$router.push(`/banner/${image.id}`)">
        <img v-lazy="image.imgUrl" />
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: 'banner',
  props: {
    images: {
      type: Array,
      require: true
    }
  },
  data() {
    return {}
  }
}
</script>

<style lang="less" scoped>
.banner-container {
  padding: 10px 10px 0;
  height: 290px;
  width: 100%;
  background-color: white;

  /deep/.van-swipe__track {
    width: 100%;
    height: 280px;
  }

  /deep/.van-swipe__indicator {
    background-color: #a1a1a1;
  }

  /deep/.van-swipe__indicator--active {
    background-color: white;
  }

  .van-swipe-item img {
    width: 100%;
    height: 280px;
  }
}
</style>
